<template>
    <div>
        <div class="vs-table-box" v-loading="loading">
            <el-form  v-if="ruleForm.ordersGoods&&ruleForm.ordersGoods.orders" label-position="right" :inline="true" :rules="rules" class="orm-info" label-width="140px" :model="ruleForm">
                <h3>评价详情</h3>

                <!-- <el-descriptions title="用户信息" border style="width:1000px">
                    <el-descriptions-item label="头像">
                        <img :src="ruleForm.user.avatar" alt="">
                    </el-descriptions-item>
                    <el-descriptions-item label="名称">
                        {{ruleForm.user.username}}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单编号">
                        {{ruleForm.ordersGoods.orders.out_trade_no}}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单完成时间">
                        {{ruleForm.ordersGoods.orders.receive_time}}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系地址">
                        
                    </el-descriptions-item>
                </el-descriptions> -->
                <div class="flex head" style="justify-content: space-between;">
                    <div v-if="ruleForm.user" class="head-left">
                        <img :src="ruleForm.user.avatar" alt="">{{ruleForm.user.username}}
                    </div>
                    <div class="head-right">
                        <div>订单编号：{{ruleForm.ordersGoods.orders.out_trade_no}}</div>
                        <div  v-if="ruleForm.ordersGoods.orders.receive_time">订单完成时间：{{ruleForm.ordersGoods.orders.receive_time | parseTime("{y}-{m}-{d} {h}:{i}:{s}")}}</div>
                    </div>
                </div>
                <div class="pro">
                    <div class="pro-li">
                        <el-image 
                        style="width:375px"
                        :src="ruleForm.ordersGoods.goods_images[0]" 
                        :preview-src-list="ruleForm.ordersGoods.goods_images"> </el-image>
                        <div class="pro-spec">
                            <div><span>商品名称：</span>{{ruleForm.ordersGoods.goods_name}}</div>
                            <div><span>颜色：</span>{{ruleForm.ordersGoods.sku_text}}</div>
                            <div><span>价格：</span>{{ruleForm.ordersGoods.orders_payable}}</div>
                        </div>
                    </div>
                </div>

                <div class="cont">
                    <div class="cont-txt">
                        <div class="left">评价内容：</div>
                        <div class="right">
                            {{ruleForm.content}}
                        </div>
                    </div>
                    <div class="cont-img" v-if="ruleForm.files">
                        <div class="left">评论图片：</div>
                        <div class="right">
                            <!-- <el-image 
                                style="width:300px"
                                v-for="it in ruleForm.files" 
                                :key='it'
                                :src="it" 
                                :preview-src-list="ruleForm.files">
                            </el-image> -->
                            <vs-uploading :readonly="true" v-model="ruleForm.files"></vs-uploading>
                        </div>
                    </div>
                    <div class="cont-fen">
                        <div class="left">
                            商品评分： <el-rate disabled v-model="ruleForm.goods_score"></el-rate>
                        </div>
                        <div class="right">
                            评价时间：{{ruleForm.create_time}}
                        </div>
                    </div>
                    <div style="margin-top:10px;text-align:right;">
                        <span  v-if="!ruleForm.reply_content" class="tab-table-text" @click="dialogVisible = true">回复</span>
                    </div>
                </div>

                <div class="comment" v-if="ruleForm.reply_content">
                    <div style="margin-bottom:10px" v-if="ruleForm.admin">回复管理者：{{ruleForm.admin.realname}}</div>
                    <div style="margin-bottom:10px">回复时间：{{ruleForm.reply_time | parseTime}}</div>
                    <div style="margin-bottom:5px"> 回复内容： </div>
                    <el-input type="textarea" v-model="ruleForm.reply_content" show-word-limit maxlength="200" rows="5"> </el-input>
                    <div style="margin-top:50px">
                        <el-button @click="utils.backPage()">返回</el-button>
                        <el-button @click="reply(ruleForm.reply_content)" type="primary">重新回复</el-button>
                    </div>
                </div>
            </el-form>
        </div>
        <el-dialog title="回复" :visible.sync="dialogVisible" width="50%" top="15%">
            <span>回复内容：</span>
            <el-input v-model="reply_content" type="textarea" show-word-limit maxlength="200" rows="5" style="margin-top:10px;"> </el-input>
            <span slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="reply(reply_content)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import VsUploading from '@/components/VsUploading.vue';
export default {
    components: { VsUploading },
    data() {
        return {
            form: {
                img: [],
                rate: null,
            },
            reply_content:'',
            dialogVisible: false,
            loading: false,
            tableData: [
                {}
            ],
            isBtn: false,
            ruleForm: {
                username: '',
                title: '',
                type: '',
                code: '',
            },
            rules: {
                username: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
                title: [{ required: true, message: '请输入企业名称', trigger: 'blur' },],
                type: [{ required: true, message: '请选择渠道', trigger: 'change' },],
                code: { required: true, message: '请输入服务码', trigger: 'blur' }
            },
        }
    },
    watch:{
        dialogVisible(val){
            if(!val)
                this.reply_content = "";
        }
    },
    created(){
        this.id = this.$route.query.id
        this.getgoodsOrders(this.id)
    },
    methods: {
        async reply(e){
            if(!e)return this.$message.error('回复内容不能为空!')
            let {code,data} = await this.$Http.setGoodsComment({
                id: this.id,
                reply_content:e
            });
            if(code){
                this.$message.success('回复成功!')
                this.utils.backPage();
            }
        },
        async getgoodsOrders(id){
            this.loading = true;
            let {code,data} = await this.$Http.getComment({id});
            this.loading = false;
            if(code){
                if(data.files){
                  data.files = data.files.split(',');
                }
                data.ordersGoods.goods_images = data.ordersGoods.goods_images.split(',');
                console.log('ruleForm',data);
                this.ruleForm = data;
            }
        },
        handleClose(dom) {
            dom && dom();
            this.dialogVisible = false;
        },
        setAd() {

        }
    }
}
</script>

<style lang="scss" scoped>
.vs-table-box{
    min-height: 400px;
}
.head {
    .head-left {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        line-height: 40px;
        img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
    }
    .head-right {
        > div {
            height: 40px;
            line-height: 40px;
            text-align: right;
        }
    }
}
.pro {
    margin-top: 10px;
    background-color: #f5f5f5;
    .pro-li {
        padding: 10px 30px;
        display: flex;
        width: 100%;
        img {
            margin-right: 30px;
            height: 90px;
            width: 150px;
        }
        .pro-spec {
            flex: 1;
            > div {
                width: 100%;
                height: 30px;
                line-height: 30px;
                span {
                    display: inline-block;
                    text-align: right;
                    width: 80px;
                }
            }
        }
    }
}
.cont {
    margin-top: 10px;
    padding: 20px 30px;
    background-color: #f5f5f5;
    .cont-txt {
        display: flex;
        line-height: 24px;
        .left {
            width: 80px;
        }
        .right {
            flex: 1;
            text-align: justify;
        }
    }
    .cont-img {
        margin-top: 10px;
        line-height: 24px;
        .left {
            width: 80px;
        }
        .right {
            padding-left: 80px;
            width: 100%;
            img {
                width: 100px;
                height: 100px;
                margin-left: 30px;
                &:first-child {
                    margin-left: 0;
                }
            }
        }
    }
    .cont-fen {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        line-height: 24px;
        .left {
            display: flex;
            align-items: center;
        }
    }
}
.comment {
    margin-top: 10px;
    padding: 20px 30px;
    background-color: #f5f5f5;
}
</style>